<template>
	<view class="recommend-money">
		<!-- <canvas style="position: absolute; z-index: -1;" :style="{width: width+'px', height: height+'px'}" canvas-id="firstCanvas"></canvas> -->
		<view class="recommend-money-img"></view>
		<view class="recommend-money-card">
			<view class="recommend-money-card-head">
				订单数<view> {{ recommendMoney.order_num }} </view>
			</view>
			<view class="recommend-money-card-money">
				¥{{ priceTotal }}
				<!-- <view>.00</view> -->
			</view>
			<view style="color: #000000; font-size: 28upx; text-align: center; margin-bottom: 10upx;">
				未提现：¥
				<view style="display: inline-block; color: #E41D1D; margin: 0upx 5upx; font-weight: bold;">
					{{ willWithdrawal }}
				</view>元
			</view>
			<view style="font-size: 28upx;color: rgba(0,0,0,0.75); text-align: center; font-weight: bold;">
				推荐奖励
			</view>
			<button class="withdrawal-wechat-btn" @click="deposit">提现到微信零钱</button>
			<view class="" style="font-size: 24upx; color: rgba(0,0,0,0.65); text-align: center; line-height: 34upx;">
				每推荐1个新用户购买VIP获得
					<view class="" style="display: inline-block; color: #E41D1D;">
						¥{{ recommendMoney.other[1].content }}
					</view>
				现金奖励
			</view>
			<view style="height: 2upx; background-color: #F2F2F2; margin: 25upx 60upx 30upx 60upx;"></view>
			<view class="">
				<!-- #ifdef H5 -->
				<button type="default" class="recommend-money-card-block-btn" @click="share">
					<view class="recommend-money-card-block" >
						 <!-- @click="shareImg" -->
						<view class="recommend-money-card-icon" style="padding: 16upx 20upx 0upx 20upx;">
							<image :src="imglink + 'shortvideo/wechat.svg'" mode="" style="width:50upx; height: 50upx;"></image>
						</view>
						分享给微信好友
					</view>
				</button>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<button type="default" open-type="share" class="recommend-money-card-block-btn">
					<view class="recommend-money-card-block" >
						 <!-- @click="shareImg" -->
						<view class="recommend-money-card-icon" style="padding: 16upx 20upx 0upx 20upx;">
							<image :src="imglink + 'shortvideo/wechat.svg'" mode="" style="width:50upx; height: 50upx;"></image>
						</view>
						分享给微信好友
					</view>
				</button>
				<!-- #endif -->
				<button type="default" class="recommend-money-card-block-btn" style="margin-left: 100upx;" @click="shareTip">
					<view class="recommend-money-card-block">
						<view class="recommend-money-card-icon" style="background-color: #ffffff; padding: 0;margin-left: 60upx; margin-bottom: 10upx;">
							<image :src="imglink + 'shortvideo/picture.svg'" mode="" style="width: 85upx; height: 85upx;"></image>
						</view>
						产生专属分销海报
					</view>
				</button>
			</view>
		</view>
		<!-- 排行榜 -->
		<view class="recommend-money-content">
			<view class="act-time-title">
				<view class="explain-title">
					<view class=""></view>
					<view class="">
						邀请排行榜
					</view>
				</view>
			</view>
			<view class="all-perfor-staff-content">
				<view class="all-perfor-staff-title">
					<text>用户</text>
					<text>推荐订单数</text>
					<text>现金奖励</text>
				</view>
				<scroll-view class="" style="overflow: scroll; height: 350upx;"
				@scrolltolower="LoadingRecommendMoney">
					<view class="all-perfor-staff-details" v-for="(info,num) in rank" :key='num' v-if="num < 101">
						<view class="" style="display: inline-block;">
							{{ num + 1}}
						</view>
						<image :src="info.user_info?info.user_info.avatar:0" mode=""></image>
						<view class="">
							{{info.user_info?info.user_info.nickname:'已注销'}}
						</view>
						<!-- <view class="" v-else>该用户已注销</view> -->
						<view class="">{{info.num}}单</view>
						<view class="">获得￥{{info.reward}}</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 海报 -->
		<uni-popup ref="shareTip" :custom="true">
			<image :src="recommendMoney.other[0].content" bindlongpress="savepicture"
			 style="background-color: #ffffff; width: 600upx; height: 65vh; margin-bottom: 350upx;"
			  mode="heightFix"
			  :show-menu-by-longpress="true"></image>
			<view class="" style="position: fixed; width: 100%; left: 0; bottom: 0; background-color: #ffffff; border-radius: 48upx 48upx 0 0;">
				<view class="" style="margin: 28upx 0 8upx 0;">
					<!-- #ifdef H5 -->
					<button type="default" class="recommend-money-card-block-btn" style="margin-left: 160upx;" @click="share">
						<view class="recommend-money-card-block">
							<view class="recommend-money-card-icon" style="padding: 20upx 32upx 2upx 24upx; margin-left: 25upx;">
								<image :src="imglink + 'shortvideo/wechat.svg'" mode="" style="width: 60upx; height: 60upx;"></image>
							</view>
							发给微信好友
						</view>
					</button>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<button type="default" open-type="share" style="margin-left: 150upx;" class="recommend-money-card-block-btn">
						<view class="recommend-money-card-block">
							<view class="recommend-money-card-icon" style="padding: 20upx 32upx 2upx 24upx; margin-left: 25upx;">
								<image :src="imglink + 'shortvideo/wechat.svg'" mode="" style="width: 60upx; height: 60upx;"></image>
							</view>
							发给微信好友
						</view>
					</button>
					<!-- #endif -->
					<button type="default" class="recommend-money-card-block-btn" style="margin-left: 170upx; padding: 4upx; background-color: #ffffff;" @click="savepicture">
						<view class="recommend-money-card-block">
							<view class="recommend-money-card-icon" style="background-color: #ffffff; padding: 0;margin-left: -1upx; margin-bottom: 12upx;">
								<image :src="imglink + 'shortvideo/download.svg'" mode="" style="width: 100upx; height: 100upx;"></image>
							</view>
							保存图片
						</view>
					</button>
				</view>
				<view style="height: 20upx; background-color: #f3f3f3;"></view>
				<view class="" style="text-align: center; font-size: 35upx; font-weight: bold; color: rgba(0,0,0,0.65); height: 80upx;padding-top: 30upx;" @click="closeTip">
					取消
				</view>
			</view>
		</uni-popup>
		<!-- 分享提示 start-->
		<uni-popup ref="share" :custom="true">
			<view class="popup_box_de_share">
				<image class="popup_box_close_share" :src="imglink + 'share_tip.png'"></image>
			</view>
		</uni-popup>
		<!-- 分享提示 end -->
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	// #ifdef H5
	import wx from '@/common/wx-js-sdk.js';
	// #endif
	export default {
		data() {
			return {
				imglink: this.$store.state.imgLink,
				width:0,
				height: 0,
				recommendMoney:{
						
				},
				customer_info:'',
				// 排行榜
				rank:[],
				sadsd:'https://tool.tuanhaoke.cn/static/image/recommend/lucky.png',
				page:1,
				pagesize:20,
				lastPage:'',
				priceTotal:0,
				willWithdrawal:0,
				// time1: '',
				savePostSucc:false,
				store_id:'',
			}
		},
		onLoad(option) {
			this.store_id = parseInt(option.store_id,10);
			console.log("进入了onload 获取url的store_id",this.store_id);
			this.width = uni.getSystemInfoSync().screenWidth
			this.height = uni.getSystemInfoSync().screenHeight
			this.getCustomer()
		},
		// #ifdef MP-WEIXIN
			onShareAppMessage(res) {
				return {
					title: '我已开通，邀请您一起开通课拍24小时营销获客系统', // 分享标题
					path: 'pages/home/organization/organization?share_id=' + this.customer_info.customer_id + '&page=share&store_id=' + this.store_id,
					imageUrl: this.recommendMoney.other[0].content
				}
			},
		// #endif
		// onReady: function(e) {
		// 	this.time1 = setInterval(() => {
		// 		clearInterval(this.time1)
		// 		//开始绘制canvas将图片与二维码放在一起
		// 		var context = uni.createCanvasContext('firstCanvas') 
		// 		context.drawImage(this.recommendMoney.other[0].content, 0, 0, uni.getSystemInfoSync().screenWidth, uni.getSystemInfoSync().screenHeight)
		// 		context.draw()
		// 	}, 1000)
		// },
		methods: {
			shareTip(){
				this.$refs.shareTip.open()
			},
			closeTip(){
				this.$refs.shareTip.close()
			},
			// #ifdef H5
			share(){
				this.$refs.share.open()
				this.sharePatriarch()
			},
			close(){
				this.$refs.share.close()
			},
			// #endif
			// #ifdef MP-WEIXIN
				// 保存图片
				savepicture(){
					let that = this
					uni.authorize({
						scope: 'scope.writePhotosAlbum',
						success() {
							console.log(that.recommendMoney.other[0].content);
							uni.showModal({
								title: '提示',
								content: '确定保存到相册吗',
								success: function (res) {
									if (res.confirm) {
										uni.downloadFile({
											url: that.recommendMoney.other[0].content,//图片地址
											success: (res) =>{
												if (res.statusCode === 200){
													uni.saveImageToPhotosAlbum({
														filePath: res.tempFilePath,
														success: function() {
															uni.showToast({
																title: "保存成功",
																icon: "none"
															});
														},
														fail: function() {
															uni.showToast({
																title: "保存失败",
																icon: "none"
															});
														}
													});
												} 
											}
										})
									
									
									} else if (res.cancel) {
										
									}
								}
							});
						},
						fail() {
							uni.showModal({
								content: '拒绝授权相册权限后无法成功保存海报，是否重新授权？',
								confirmColor: '#00A66A',
								success: function (res) {
									if (res.confirm) {
										uni.openSetting({
											success(res) {
												console.log(res.authSetting)
											}
										});
									} else if (res.cancel) {
										
									}
								}
							})
						}
					})
				},
			// #endif
			// #ifdef H5
				// 保存图片
				savepicture(Url){
					Url = this.recommendMoney.other[0].content //图片路径，也可以传值进来
					var triggerEvent = "touchstart"; //指定下载方式
					var blob=new Blob([''], {type:'application/octet-stream'}); //二进制大型对象blob
					var url = URL.createObjectURL(blob); //创建一个字符串路径空位
					var a = document.createElement('a'); //创建一个 a 标签
					a.href = Url;  //把路径赋到a标签的href上
					//正则表达式，这里是把图片文件名分离出来。拿到文件名赋到a.download,作为文件名来使用文本
					a.download = Url.replace(/(.*\/)*([^.]+.*)/ig,"$2").split("?")[0]; 
					/* var e = document.createEvent('MouseEvents');  //创建事件（MouseEvents鼠标事件）
					e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); //初始化鼠标事件（initMouseEvent已弃用）*/
						
					//代替方法。创建鼠标事件并初始化（后面这些参数我也不清楚，参考文档吧 https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/MouseEvent）
					var e = new MouseEvent('click', ( true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null));  
					//派遣后，它将不再执行任何操作。执行保存到本地
					a.dispatchEvent(e); 
					//释放一个已经存在的路径（有创建createObjectURL就要释放revokeObjectURL）
					URL.revokeObjectURL(url);
				},
			// #endif
			// 获取推荐赚钱
			getRecommendMoney(){
				let data = {
					token:this.$store.getters.getToken,
					customer_id:this.customer_info.customer_id,
					page: this.page,
					pagesize: this.pagesize
				}
				console.log("8888888",data);
				// 3.发送请求
				this.$api.get_recommendMoney(data).then(res => {
					console.log(res,"545454");
					if(res.status){
						this.recommendMoney = res.data
						if(this.recommendMoney.priceTotal > 0){
							this.priceTotal = this.recommendMoney.priceTotal
						}
						if(this.recommendMoney.willWithdrawal > 0){
							this.willWithdrawal = this.recommendMoney.willWithdrawal
						}
						this.rank = res.data.rank.data
						this.lastPage = res.data.rank.last_page
						
						console.log(this.recommendMoney,'推荐赚钱')
						console.log(this.rank,'排行榜')
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none',
							duration:2000
						})
					}
				}).catch(err =>{
					console.log(err)
				})
			},
			LoadingRecommendMoney(){
				this.page ++
				console.log(this.page)
				if(this.page <= this.lastPage){
					let data = {
						token:this.$store.getters.getToken,
						type:2,
						page: this.page,
						pagesize: this.pagesize
					}
					this.$api.get_recommendMoney(data).then(res=>{
						this.rank = this.videolist.concat(res.data.rank.data)
						console.log("上拉加载更多的数据.....")
						console.log(this.videolist)
					}).catch(err => {
						console.log(err)
					})
				}
			},
			// 获取用户数据
			getCustomer(){
				const data = {
					token:this.$store.getters.getToken,
					store_id:this.store_id
				}
				this.$api.getCustomerInfo(data).then(res => {
					console.log(res)
					if(res.status){
						this.customer_info = res.data.userinfo
						console.log(this.customer_info,'CCCCCCCCCCCCCCCCCCC');
						this.getRecommendMoney()
					}
				}).catch(err => {
					console.log(err)
				})
				// let customer_info = this.$api.getCustomerInfo(data)
				// console.log(this.customer_info)
				
			},
			// 提现
			deposit(){
				uni.navigateTo({
					url:'recommendDeposit?store_id=' + this.store_id + '&price=' + this.willWithdrawal
				})
			},
			// 分享
			//#ifdef H5
			async sharePatriarch(){
				let signLink = /(Android)/i.test(navigator.userAgent) ? location.href : window.entryUrl;
				console.log(signLink,'signLink99999999999999999999999999999')
				let data = {
					token:this.$store.getters.getToken,
					url:signLink
				}
				// console.log(this.store_info,'1111111')
				let _self = this
				try{
					// let shareconfig = await _self.$api.share_posters(data)
					// console.log(shareconfig,'微信配置');
					// const configData = JSON.parse(shareconfig.data)
					
					let configData = JSON.parse((await this.$api.gain_share_data(data)).data)
					
					wx.config(configData)
					console.log(configData,'微信配置',_self);
					wx.ready(function(){
						wx.checkJsApi({
							jsApiList: [
								'updateTimelineShareData',
								'updateAppMessageShareData',
								'onMenuShareAppMessage',
								'onMenuShareTimeline'
							],
							success: function(res) {
								console.log('接口检测成功:'+res);
							},
							error: function(err) {
								console.log('接口检测失败:'+err);
							}
						})
						const shareData = { 
							title: '我已开通，邀请您一起开通课拍24小时营销获客系统', // 分享标题
							// desc: '我已经参与，邀请你一起加入课拍拍平台，一起赚钱吧！', // 分享描述
							link: _self.current_url()+'/pages/home/organization/organization?share_id=' + _self.customer_info.customer_id + '&page=share&store_id=' + _self.store_id,
							imgUrl: _self.recommendMoney.other[0].content, // 分享图标
							success: function (res) {
							  console.log(res,'success ---')
							},
							fail:function(err){
								console.log(err.errMsg,'fail ---')
							} 
						}
						console.log(shareData,'shareData');
						wx.updateAppMessageShareData(shareData);
						wx.updateTimelineShareData(shareData);
					})
					
				}catch(e){
					console.log(e)
				}
			},
			//#endif
		}
	}
</script>

<style>
	.recommend-money{
		background-color: #eaeaea;
		height: 100%; 
		width: 100%; 
	}
	.recommend-money-img{
		width: 100%;
		height: 300upx;
		background-size: 100%;
		background-image: url(https://tool.tuanhaoke.cn/static/image/member/member-center.png);
	}
	.recommend-money-card{
		margin: 30upx;
		margin-top: -230upx;
		padding: 30upx 35upx 30upx 35upx;
		border-radius: 16upx;
		background-color: #ffffff;
	}
	.recommend-money-card-head{
		font-size: 34upx; 
		font-weight: 600;
		vertical-align: bottom;
		color: rgba(0,0,0,0.75);
	}
	.recommend-money-card-head>view{
		display: inline-block; 
		font-size: 32upx;
		font-weight: bold;
		margin-left: 10upx;
		vertical-align: bottom;
		color: #E41D1D;
	}
	.recommend-money-card-money{
		font-family: DINAlternate-Bold;
		font-size: 80upx;
		margin-bottom: 10upx;
		color: #E41D1D;
		text-align: center;
		margin-top: 10upx;
	}
	.recommend-money-card-money>view{
		display: inline-block;
		font-size: 40upx;
	}
	.withdrawal-wechat-btn{
		width: 402upx;
		color: #ffffff;
		margin-top: 40upx;
		font-size: 34upx;
		margin-bottom: 30upx;
		line-height: 80upx;
		border-radius: 60upx;
		background-size: 100%;
		background-image: url(https://tool.tuanhaoke.cn/static/image/shortvideo/parent-clues-header.png);
	}
	.recommend-money-card-block{
		width: 100%;
		font-weight: bold; 
		display: inline-block;
		font-size: 13px;
		vertical-align: bottom;
		color: rgba(0,0,0,0.65);
		background-color: #ffffff;
	}
	.recommend-money-card-block-btn{
		display: inline-block;
		margin-left: 70upx;
		padding: 0;
		border: none;
		background: none;
		vertical-align: auto;
	}
	.recommend-money-card-block-btn::after{
		display: inline-block;
		border: none;
		background: none;
	}
	.recommend-money-card-icon{
		padding: 16upx 16upx 0upx 16upx;
		margin-left: 40upx;
		margin-bottom: 30upx;
		width: 48upx; 
		background-color: #1CB419; 
		border-radius: 200upx;
	}
	.recommend-money-content{
		height: 490upx;
		margin: 30upx;
		padding: 15upx 35upx 30upx 35upx;
		border-radius: 16upx;
		background-color: #ffffff;
	}
	.act-time-title{
		width: 100%;
		box-sizing: border-box;
		background: #FFFFFF;
		margin-top: 20upx;
	}
	.explain-title{
		display: flex;
		width: 100%;
	}
	.explain-title>view:first-child{
		width: 8upx;
		height: 32upx;
		background: #FF8B46;
		margin-top: 6upx;
	}
	.explain-title>view:last-child{
		font-size: 16px;
		color: rgba(0,0,0,0.65);
		font-weight: bold;
		margin-left: 10upx;
	}
	.all-perfor-staff-content{
		margin-top: 30upx;
	}
	.all-perfor-staff-title{
		width: 100%;
		height: 64upx;
		line-height: 64upx;
		background: #F4F5F9;
		padding: 0 42upx 0 54upx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		color: #666666;
		font-size: 24upx;
	}
	.all-perfor-staff-title>text:nth-child(2){
		display: inline-block;
		margin-left: 80upx;
	}
	.all-perfor-staff-details{
		width: 100%;
		font-size: 28upx;
		padding: 14upx 0;
		border-bottom: 1upx solid #DEDEDE;
	}
	.all-perfor-staff-details>image{
		width: 60upx; 
		height: 60upx;
		margin-top: 10upx;
		vertical-align: top;
		border-radius: 80upx;
	}
	.all-perfor-staff-details>view{
		color: #333333;
		font-size: 28upx;
		line-height: 80upx;
		vertical-align: top;
	}
	.all-perfor-staff-details>view:nth-child(1){
		display: inline-block;
		overflow-y: hidden;
		height: 80upx;
		width: 38upx;
		margin-left: 10upx;
	}
	.all-perfor-staff-details>view:nth-child(3){
		display: inline-block;
		overflow-y: hidden;
		height: 80upx;
		width: 130upx;
		margin-left: 10upx;
	}
	.all-perfor-staff-details>view:nth-child(4){
		display: inline-block;
		text-align: center;
		overflow-y: hidden;
		height: 80upx;
		width: 140upx;
	}
	.all-perfor-staff-details>view:nth-child(5){
		display: inline-block;
		width: 230upx;
		height: 80upx;
		overflow-y: hidden;
		text-align: right;
	}
	button{
		color: #ffffff;
		background-color: #ffffff;
	}
	/* 分享提示 start */
		.popup_box_de_share {
			width: 100%;
			height: 100%;
			z-index: 999;
		}
	
		.popup_box_close_share {
			width: 300upx;
			height: 300upx;
			position: fixed;
			top: 10upx;
			right: 10upx;
		}
	
		/* 分享提示 end */
</style>
